import React from 'react';
import { Layout, Typography, Card } from 'antd';
import {
  UserOutlined,
  UserAddOutlined,
  UserDeleteOutlined,
  UserSwitchOutlined,
  HomeOutlined,
  SettingOutlined,
  BellOutlined,
  MailOutlined,
  MenuOutlined,
  PlusOutlined,
  MinusOutlined,
  DeleteOutlined
} from '@ant-design/icons';
const { Content } = Layout;
const { Title, Text } = Typography;

const IconPage: React.FC = () => {
  return (
    <Content>
      <Card>
        <Title level={2}>Icon 图标</Title>
        <Text code>antd/lib/icon</Text>
        <div style={{ marginTop: 20 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
            <div>
              <h3>基本图标</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                <UserOutlined style={{ fontSize: 24 }} />
                <HomeOutlined style={{ fontSize: 24 }} />
                <SettingOutlined style={{ fontSize: 24 }} />
                <BellOutlined style={{ fontSize: 24 }} />
                <MailOutlined style={{ fontSize: 24 }} />
                <MenuOutlined style={{ fontSize: 24 }} />
              </div>
            </div>

            <div>
              <h3>带颜色的图标</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                <UserOutlined style={{ fontSize: 24, color: 'red' }} />
                <HomeOutlined style={{ fontSize: 24, color: 'blue' }} />
                <SettingOutlined style={{ fontSize: 24, color: 'green' }} />
                <BellOutlined style={{ fontSize: 24, color: 'orange' }} />
              </div>
            </div>

            <div>
              <h3>动态图标组合</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                <UserAddOutlined style={{ fontSize: 24 }} />
                <UserDeleteOutlined style={{ fontSize: 24 }} />
                <UserSwitchOutlined style={{ fontSize: 24 }} />
                <PlusOutlined style={{ fontSize: 24 }} />
                <MinusOutlined style={{ fontSize: 24 }} />
                <DeleteOutlined style={{ fontSize: 24 }} />
              </div>
            </div>
          </div>
        </div>
      </Card>
    </Content>
  );
};

export default IconPage;